//功能描述：基于智能油田样式的list组件，支持单选和复选，当前只支持一种皮肤
//开发技术：基于jquery和base.js
//当前版本：0.0.1
//开发人：杜世峰 
//开发时间：2019-08-13
var listTComponent = HwBase.extend({
    context: {},//上下文
    tpl:  '<ul class="ul-list">'+
                '<% for(var listid in obj.data){%>'+
                    '<% if(obj.mutiCheck){ %>'+ 
                        '<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>">'+
                            '<input type="checkbox" id="<%= obj.data[listid][obj.showFields.idfield] %>" <%= obj.autoFirstCheck==true && listid==0 ? \'checked\':\'\' %>>'+
                            '<label for="<%= obj.data[listid][obj.showFields.idfield] %>"><%= obj.data[listid][obj.showFields.textfield] %></label>'+
                        '</li>'+
                    '<%}else{ %>'+
                        '<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>" id="<%= obj.data[listid][obj.showFields.idfield] %>">'+
                            '<%= obj.data[listid][obj.showFields.textfield] %>'+
                        '</li>'+
                    '<%}%>'+
                '<%}%>'+
            '</ul>',//模板
    container: {},//容器对象
    opts: {
        env:'dev',//dev or vmd
        container: $('#container'),//容器
        width: '',//宽度
        height: '',//高度
        skin: 'default',//默认皮肤
        autoSearch: false,//是否开启搜索
        mutiCheck: true,//是否开启多选
        autoFirstCheck: true,//是否默认选中第一行
        showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
        dataStore: [],//tab数据集
       
        temClick:function(item,self,e){}
       
    },//默认配置项
    init: function (config) {
        //自动保存配置项
        this.__config = $.extend({}, this.opts, config);
        this.render()
        this.bind()
    },
    //可以使用get来获取配置项
    get: function (key) {
        return this.__config[key]
    },
    //可以使用set来设置配置项
    set: function (key, value) {
        this.__config[key] = value
    },
    bind: function () {
        var self = this;
        var parentNode = self.get('container') || $(document.body);
       
       //列表项选中事件
        parentNode.find(".ul-list li").on('click',function(e){
            var target = $(this);
            //多选情况
            if(self.get('mutiCheck')){
                var checkbox = target.find('input');
                if(checkbox.is(":checked")){
                    target.removeClass("selected");
                    checkbox.prop("checked",false);
                }else{
                    target.addClass("selected");
                    checkbox.prop("checked",true);
                }
            }
            //单选情况
            else{
                target.addClass('selected').siblings().removeClass('selected');
            } 
            if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
                var index = $(".ul-list li").index(target);
                //写了itemclick配置调用，绑定了组件事件也调用
                self.get('itemClick')(self.get('__renderData')[index],self,e);
                self.fire('itemClick',self.get('__renderData')[index],self,e);
            }
        })
    },
    render: function (dataConf) {
        var self = this;
        var data = {
            autoSearch: self.get('autoSearch'),//是否开启搜索
            mutiCheck: self.get("mutiCheck"),//是否开启多选
            autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
            autoSearch: self.get("autoSearch"),
            showFields : self.get("showFields"),
            data: dataConf || self.get('dataStore')
        } 
       
        self.set("__renderData",data);
        var html = self.parseTemplate(self.tpl,data);
        var currentNode = $(html)

        var _guid = self.guid();
        self.set("__guid",_guid);
        currentNode.attr("id",_guid);

        //设置宽度、高度、和皮肤
        if(self.get('width')) currentNode.width(self.get('width'))
        if(self.get('height')) currentNode.height(self.get('height'))
        if(self.get('skin')) currentNode.addClass('hwlist-' + self.get('skin') || 'default')

        self.set('__currentNode',currentNode)

        if(self.get('env')=='dev'){
            self.container = self.get('container') || $(document.body);
            self.container.append(currentNode)
        }else{
            self.container = self.get('container');
            self.container.update(html)
        }
    },
    //定义销毁的方法，一些收尾工作都应该在这里
    destroy: function () {
        var self = this
        //去掉自身的事件监听
        self.off()
        //删除渲染好的dom节点
        self.get('__currentNode').remove()
    },
      //跟新数据
    setData:function(data){
        var self = this;
        
        var newdata = {
            autoSearch: self.get('autoSearch'),//是否开启搜索
            mutiCheck: self.get("mutiCheck"),//是否开启多选
            autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
            autoSearch: self.get("autoSearch"),
            showFields : self.get("showFields"),
            data: data || self.get('dataStore')
        } 

        var html = self.parseTemplate(self.tpl,newdata);
        var newHtmlNode = $(html)

        //设置宽度、高度、和皮肤
        if(self.get('width')) newHtmlNode.width(self.get('width'))
        if(self.get('height')) newHtmlNode.height(self.get('height'))
        if(self.get('skin')) newHtmlNode.addClass('hwlist-' + self.get('skin') || 'default')

        var currentNode = self.get('__currentNode')
         if (!currentNode) return;

        currentNode.replaceWith(newHtmlNode)
        currentNode.attr('id',self.get('__guid'));
        self.set('__currentNode',currentNode)
        self.set("__renderData",data);

        self.bind();
    },
    //获取选中的对象
    getSelectItem:function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find("li.selected");
    },
    getRenderHtml : function(){
        var self = this;
        var currentNode = self.get('container') || $(document.body);
        return currentNode.find('ul-list').prop('outerHTML');
    }
})